DAY 3.SASS/SCSS的優勢與挑戰/如何安裝並開發環境

16th鐵人賽

tina_0311_

2024-09-09 23:06:07

192 瀏覽

分享至

一、為什麼使用SASS/SCSS？優勢與挑戰

SASS/SCSS的優勢

1.變量（Variables）

SASS/SCSS允許定義變量來儲存常用的屬性值，如顏色、字體大小等。這樣能確保在樣式表中保持一致，並且只需修改一次變量，即可更新所有應用該變量的地方。

2.巢狀（Nesting）

支持巢狀寫法，讓CSS結構更加直觀，與HTML的層次對應，更容易管理複雜的選擇器。

3.混入（Mixins）

允許定義可重用的代碼塊，並且可以帶參數，使樣式更具動態性。這能減少重複代碼，提升效率。

4.繼承（Inheritance）

透過繼承，SASS/SCSS能夠將多個選擇器的樣式進行重複使用，減少冗長的代碼。

5.模組化

SASS/SCSS可以將樣式拆分成多個模組文件，並通過**@import或@use**語法來組合，讓大型專案更具組織性。

使用時可能面臨的挑戰

1.學習曲線

雖然SCSS與CSS語法相近，但引入了變量、巢狀、混入等高級功能，初學者可能需要花時間熟悉這些概念，尤其是SASS的縮進語法。

2.編譯步驟

SASS/SCSS需要編譯器來轉換成標準的CSS，這意味著在開發流程中需要增加一個編譯步驟，不像CSS可以直接在瀏覽器中運行。

二、安裝與設置SASS/SCSS開發環境

我是使用Visual Studio Code(簡稱 VS Code) 擴充功能來編譯 SCSS，簡易步驟如下

1.去官網下載Visual Studio Code

切記要選擇自己適合的模式

2.安裝「Live Sass Compiler」擴充功能

打開 VS Code，點擊左側的「Extensions」圖標。
在搜尋欄輸入「Live Sass Compiler」，找到後點擊安裝。

3.建立 SCSS 檔案

在你的專案資料夾中，建立一個style.scss檔案，並將以下內容加入檔案：

$primary-color: #3498db;

body {
  background-color: $primary-color;
  font-size: 16px;
}

4.啟動 Live Sass Compiler

打開你的 SCSS 檔案後，在 VS Code 窗口底部可以看到「Watch Sass」按鈕。
點擊「Watch Sass」按鈕，Live Sass Compiler 會自動開始監控你的 SCSS 檔案並在每次儲存後自動編譯為 CSS。

5.連接編譯後的 CSS 檔案

在專案中建立一個 index.html 文件，將以下內容加入其中，並確保 HTML 中的標籤連結的是生成的 CSS 檔案：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SCSS Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, SCSS!</h1>
</body>
</html>